<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>新农贸菜篮子</title>
    {% load static %}
    <link rel="stylesheet" href="{% static '/css/elementui.css' %}">
    <link rel="stylesheet" href="{% static '/css/elementui-font.css' %}">
    <link rel="stylesheet" href="{% static '/css/header.css' %}">
    <link rel="stylesheet" href="{% static '/css/index.css' %}">
    <link rel="stylesheet" href="{% static '/css/footer.css' %}">
    <script src="{% static '/js/vue.js' %}"></script>
    <script src="{% static '/js/axios.js' %}"></script>
    <script src="{% static '/js/elementui.js' %}"></script>
</head>
<body>
<div id="app">
    <!-- 头部 -->
    {% include "./header.html" %}

    <!-- 首页 开始 -->
    <div v-if="activeIndex=='1'" class='bannerbox'>
        <!-- banner -->
        <div class='banner'>
            <img src="{% static '/images/banner.jpg' %}">
        </div>
        <div id="tab">
            <div class="tab-tit">
                <a href="javascript:;" @click="getTodayInfo(1)" :class="{'cur':marketId==1}">正和农贸市场</a>
                <a href="javascript:;" @click="getTodayInfo(2)" :class="{'cur':marketId==2}">北站市场</a>
                <a href="javascript:;" @click="getTodayInfo(3)" :class="{'cur':marketId==3}">胜利新菜市</a>
                <a href="javascript:;" @click="getTodayInfo(4)" :class="{'cur':marketId==4}">白沙农贸综合市场</a>
                <a href="javascript:;" @click="getTodayInfo(5)" :class="{'cur':marketId==5}">北雀农贸综合市场</a>
                <a href="javascript:;" @click="getTodayInfo(6)" :class="{'cur':marketId==6}">胜利商贸城农贸市场</a>
                <a href="javascript:;" @click="getTodayInfo(7)" :class="{'cur':marketId==7}">华保农贸市场</a>
                <a href="javascript:;" @click="getTodayInfo(8)" :class="{'cur':marketId==8}">永丰农贸市场</a>
                <a href="javascript:;" @click="getTodayInfo(9)" :class="{'cur':marketId==9}">盛世农贸市场</a>
                <a href="javascript:;" @click="getTodayInfo(10)" :class="{'cur':marketId==10}">小鹅山过度市场</a>
            </div>
            <div class="today">今 日 行 情</div>
            <div class="tab-content" align="center">
                <el-table :data="todayInfoData" stripe style="color: black">
                    <el-table-column prop="category1" label="一级分类" width="180"></el-table-column>
                    <el-table-column prop="category2" label="二级分类" width="180"></el-table-column>
                    <el-table-column prop="product_name" label="品 名" width="250"></el-table-column>
                    <el-table-column prop="min_price" label="最低价" width="70"></el-table-column>
                    <el-table-column prop="avg_price" label="平均价" width="70"></el-table-column>
                    <el-table-column prop="max_price" label="最高价" width="70"></el-table-column>
                    <el-table-column prop="standards" label="规 格" width="120"></el-table-column>
                    <el-table-column prop="place" label="产 地" width="100"></el-table-column>
                    <el-table-column prop="unit" label="单 位" width="80"></el-table-column>
                    <el-table-column prop="market_name" label="市场名称" width="150"></el-table-column>
                    <el-table-column prop="pub_date" label="发布日期" width="90"></el-table-column>
                </el-table>
            </div>
        </div>
    </div>
    <!-- 首页 结束 -->


    <!-- 价格行情模板 开始 -->
    <div v-if="activeIndex=='2'">
        <div align="center" style="width: 100%">
            <div class="block">
                <el-pagination
                        background
                        @current-change="detailCurrentChange"
                        :current-page.sync="detailCurrentPage"
                        :page-size="detailPageSize"
                        layout="prev, pager, next, jumper"
                        :total="detailTotal">
                </el-pagination>
            </div>
            <el-table :data="detailData" stripe style="width: 75%; color: black">
                <el-table-column prop="category1" label="一级分类" width="120"></el-table-column>
                <el-table-column prop="category2" label="二级分类" width="120"></el-table-column>
                <el-table-column prop="product_name" label="品 名" width="180"></el-table-column>
                <el-table-column prop="min_price" label="最低价" width="70"></el-table-column>
                <el-table-column prop="avg_price" label="平均价" width="70"></el-table-column>
                <el-table-column prop="max_price" label="最高价" width="70"></el-table-column>
                <el-table-column prop="standards" label="规 格" width="150"></el-table-column>
                <el-table-column prop="place" label="产 地" width="100"></el-table-column>
                <el-table-column prop="unit" label="单 位" width="80"></el-table-column>
                <el-table-column prop="market_name" label="市场名称" width="150"></el-table-column>
                <el-table-column prop="pub_date" label="发布日期" width="90"></el-table-column>
            </el-table>
            <div class="block">
                <el-pagination
                        background
                        @current-change="detailCurrentChange"
                        :current-page.sync="detailCurrentPage"
                        :page-size="detailPageSize"
                        layout="prev, pager, next, jumper"
                        :total="detailTotal">
                </el-pagination>
            </div>
        </div>
    </div>
    <!-- 价格行情模板 结束 -->


    <!-- 行情分析模板 开始 -->
    <div v-if="activeIndex=='3'" align="center">
        <el-table :data="infoData" v-loading="infoLoading" style="width: 75%;">
            <el-table-column>
                <template slot-scope="scope">
                    <div align="center"><img :src="scope.row.url" alt="scope.row.title" width="640" height="480"></div>
                </template>
            </el-table-column>
        </el-table>
    </div>
    <!-- 行情分析模板 结束 -->


    <!-- 历史价格 开始 -->
    <div v-if="activeIndex=='4'" align="center">
        <div class="history">
            <el-row>
                <el-col :span="24">
                    <div>
                        <el-date-picker v-model="startDate" type="date" value-format="yyyy-MM-dd"
                                        placeholder="选择时间"></el-date-picker>
                        &nbsp;&nbsp;&nbsp;
                        <el-date-picker v-model="endDate" type="date" value-format="yyyy-MM-dd"
                                        placeholder="选择时间"></el-date-picker>
                        &nbsp;&nbsp;&nbsp;
                        <el-select v-model="marketName" placeholder="请选择菜市">
                            <el-option
                                    v-for="item in marketInfoData"
                                    :key="item.key"
                                    :label="item.marketname"
                                    :value="item.marketname">
                            </el-option>
                        </el-select>
                        &nbsp;&nbsp;&nbsp;
                        <el-input v-model="productName" placeholder="请输入菜品名称"
                                  style="width: 250px"></el-input>
                        &nbsp;&nbsp;&nbsp;
                        <el-button type="success" @click="search(1)">查询</el-button>
                    </div>
                </el-col>
            </el-row>
        </div>
        <div align="center" style="width: 100%; margin-top: 20px">
            <div class="block" v-if="isSearched==1">
                <el-pagination
                        background
                        @current-change="search"
                        :current-page.sync="searchCurrentPage"
                        :page-size="searchPageSize"
                        layout="prev, pager, next, jumper"
                        :total="searchTotal">
                </el-pagination>
            </div>
            <el-table :data="searchData" stripe style="width: 75%; color: black">
                <el-table-column prop="category1" label="一级分类" width="120"></el-table-column>
                <el-table-column prop="category2" label="二级分类" width="120"></el-table-column>
                <el-table-column prop="product_name" label="品 名" width="180"></el-table-column>
                <el-table-column prop="min_price" label="最低价" width="70"></el-table-column>
                <el-table-column prop="avg_price" label="平均价" width="70"></el-table-column>
                <el-table-column prop="max_price" label="最高价" width="70"></el-table-column>
                <el-table-column prop="standards" label="规 格" width="150"></el-table-column>
                <el-table-column prop="place" label="产 地" width="100"></el-table-column>
                <el-table-column prop="unit" label="单 位" width="80"></el-table-column>
                <el-table-column prop="market_name" label="市场名称" width="150"></el-table-column>
                <el-table-column prop="pub_date" label="发布日期" width="90"></el-table-column>
            </el-table>
            <div align="center" style="width: 100%">
                <div class="block" v-if="isSearched==1">
                    <el-pagination
                            background
                            @current-change="search"
                            :current-page.sync="searchCurrentPage"
                            :page-size="searchPageSize"
                            layout="prev, pager, next, jumper"
                            :total="searchTotal">
                    </el-pagination>
                </div>
            </div>
        </div>
    </div>
    <!-- 历史价格 结束 -->

    {% include "./footer.html" %}
</div>
</body>
<script>
    new Vue({
        el: '#app',
        data: function () {
            const infoLoading = true;

            // 当前路由
            const activeIndex = '1';

            // 首页数据
            const detailData = [];

            // 行情数据
            const infoData = [];

            // 今日数据
            const todayInfoData = [];

            // 市场名称数组
            const marketInfoData = [];

            //市场名
            const marketName = ''

            // 价格行情
            const detailCurrentPage = 1;
            const detailPageSize = 100;
            const detailTotal = 0;

            // 行情分析
            const infoCurrentPage = 1;
            const infoPageSize = 100;
            const marketId = 1;

            //历史查询
            const searchData = [];//默认搜索结果数据
            const searchTotal = 0
            const startDate = '';
            const endDate = '';
            const productName = '';

            // 历史查询结果分页
            const searchCurrentPage = 1;
            const searchPageSize = 100;

            // 是否查询过
            const isSearched = 0;

            return {
                infoLoading,
                activeIndex,
                detailData,
                detailCurrentPage,
                detailPageSize,
                detailTotal,
                infoCurrentPage,
                infoPageSize,
                infoData,
                marketId,
                todayInfoData,
                marketInfoData,
                startDate,
                endDate,
                marketName,
                productName,
                searchData,
                searchTotal,
                isSearched,
                searchCurrentPage,
                searchPageSize
            }
        },

        methods: {
            handleSelect(key, keyPath) {
                let self = this;
                self.activeIndex = key;

                // 获取行情分析图
                if (key == '3') {
                    url = 'http://127.0.0.1:7788/info'
                    axios.get(url).then(function (response) {
                        self.infoData = response.data.list;
                        self.infoLoading = false;
                    });
                }
            },

            // 价格行情分页
            detailCurrentChange(current_page) {
                let self = this;
                url = 'http://127.0.0.1:7788/detail/page/' + current_page + '/pagesize/' + self.detailPageSize;
                axios.get(url).then(function (response) {
                    self.detailData = response.data.list;
                    self.detailTotal = response.data.total;
                });
                console.log(`当前页: ${current_page}`);
            },

            // 行情分析分页
            infoCurrentChange(current_page) {
                let self = this;
                url = 'http://127.0.0.1:7788/info/page/' + current_page + '/pagesize/' + self.infoPageSize;
                axios.get(url).then(function (response) {
                    self.detailData = response.data.list;
                    self.detailTotal = response.data.total;
                });
                console.log(`当前页: ${current_page}`);
            },

            //获取今日数据
            getTodayInfo(marketId) {
                let self = this;
                self.marketId = marketId;
                url = 'http://127.0.0.1:7788/today/' + marketId;
                axios.get(url).then(function (response) {
                    self.searchData = self.todayInfoData = response.data.list;
                });
            },

            // 获取市场信息
            loadMarketInfo() {
                let self = this;
                url = 'http://127.0.0.1:7788/marketinfo'
                axios.get(url).then(function (response) {
                    self.marketInfoData = response.data.list;
                });
            },

            //查询历史价格
            search(current_page) {
                let self = this;
                url = 'http://127.0.0.1:7788/search/'
                postData = {
                    'start_date': self.startDate,
                    'end_date': self.endDate,
                    'market_name': self.marketName,
                    'product_name': self.productName,
                    'current_page': current_page,
                    'page_size': self.searchPageSize
                }

                axios.post(url, postData).then(function (response) {
                    self.searchData = response.data.list;
                    self.searchTotal = response.data.total;
                    self.isSearched = 1;
                });
            }
        },

        created() {
            // 获取行情信息首页数据
            this.detailCurrentChange(1);

            // 获取今日数据第一页
            this.getTodayInfo(1);

            // 获取市场信息
            this.loadMarketInfo();
        }
    })
</script>
</html>